<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>Good Form</title>
	<link href="/adorn/adorn.css" rel="stylesheet"/>

<script>
//<![CDATA[
		var local = ( /local/.test(window.location.host) ? 0 : 1);
		function loadScript(a){
			for(var i=0;i<a.length;i++){
				document.write('<script src="'+a[i]+'"><\/script>');
			}
		}
		loadScript([['/_packages/jquery-1.9.1.js','http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'][local]]);
//]]>
</script>

	<script src="./sandbox/countryNames.js"></script>
	<script src="/_packages/modernizr-2.0.js"></script>

	<!-- EOF Plugins -->

	<!-- Document formatting -->
	<script src="/adorn/adorn.js"></script>

	<style>
			form label{
			    max-width:200px;
			    width:100%;
			    display:inline-block;
			    margin-left:30px;
			}
			
			label, input, select, textarea{
				font-size:1.5rem;
				vertical-align:middle;
			}
	</style>
</head>
<body>


<nav class="toc"></nav>
<header>
<h1>I say, good &lt;form&gt;!</h1>
</header>

<blockquote>
<p>Wot'O, this is a jolly jQuery plugin for adding cheeky HTML5 forms to your site and wotnot. So simple to use you'll be done before morning tea. 
<p>Should you be bored after tea, then fear not for the want of being excited! There's a cracking WYSIWYG editor and a psyhic predictive text input to entertain you well in time for afternoon tea.
</blockquote>


<h2>The quick and dirty implementation</h2>
<p>Simply, include the folllowing JavaScript file...

<a href="./dist/jquery.form.js" class="pre">&lt;script src="./dist/jquery.form.js"&gt;&lt;/script&gt;</a>

and CSS StyleSheet... 

<a href="./dist/jquery.form.css" class="pre">&lt;link rel="stylesheet" href="./dist/jquery.form.css"/&gt;</a>

Then at the bottom of the page invoke the shim on the form elements in the page...

<pre class="pre">
	$("form").form();
</pre>

<p>Minified versions are available at <a href="./dist/jquery.form.min.js">jquery.form.min.js</a> and add the css <a href="./dist/jquery.form.min.css">jquery.form.min.css</a>

<p>Alternatively you can implement the features individually, see below


<h2>Check Validity (HTML5 Shim)</h2>


	<form>
		<label class="required">Text required</label> 
		<input type="text" required/>
		<br />
		<label class="required">Checked required</label> 
		<input type="checkbox" required="required"/>
		<br />
		<label>Type time</label>
		<input type="time" data-type="time" />
		<br />
		<label>Type number</label>
		<input type="number" data-type="number" placeholder="Number 1-10" max="10" min="0"/>
		<br />
		<label>Type email</label>
		<input type="email" data-type="email" placeholder="e.g. me@example.com" />
		<br />
		<label>Type Url</label>
		<input type="url" data-type="url" placeholder="e.g. http://example.com"/>
		<br/>
		<label>Type Match pattern</label>
		<input type="text" pattern="[a-z0-9]"/>
		<br />
		<button type="submit">Submit</button>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.checkValidity.css"/>

Include the script

	<script class="pre" src="./src/jquery.checkValidity.js"></script>

Bind the test to the form submit

	<script class="pre">
	$("form").submit(function(){
		if( $(this).checkValidity() ){
			alert("Form passed");	
		}
	});
	</script>


<h3>CheckValidity Automatic</h3>

Include the script

	<script class="pre" src="./src/jquery.event.submit.js"></script>

Intiate the bound test automatically, just by assigning a form on submit event, e.g.

	<script class="pre">
	$("form").submit(function(e){
		alert("Form passed again, notice this wasn't sent when the form fails, yet the check wasn't included");
		e.preventDefault();
	});
	</script>



<h2>Range (HTML5 Shim)</h2>

	<form>
		<label>input [type=range]</label>
		<input type="range" data-type="range" />
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.range.css"/>

Include the script

	<script class="pre" src="./src/jquery.range.js"></script>

Bind the Control to input elements with [type=range] attribute

	<script class="pre">
	$(":input").range();
	</script>


<h2>Color (HTML5 Shim)</h2>

	<form>
		<label>input [type=color]</label>
		<input type="color" data-type="color" />
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.color.css"/>

Include the script

	<script class="pre" src="./src/jquery.color.js"></script>

Bind the Control to input elements with [type=color] attribute

	<script class="pre">
	$(":input").color();
	</script>



<h2>Date (HTML5 Shim)</h2>

	<form>
		<label>input [type=date]</label>
		<input type="date" data-type="date" />
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.date.css"/>

Include the script

	<script class="pre" src="./src/jquery.date.js"></script>

Bind the Control to input elements with [type=date] attribute

	<script class="pre">
	$(":input").date();
	</script>



<h2>Placeholder (HTML5 Shim)</h2>

	<form>
		<label>input [placeholder]</label>
		<input type="text" placeholder="Can you see it?"/>		
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.placeholder.css"/>

Include the script

	<script class="pre" src="./src/jquery.placeholder.js"></script>

Bind the Control to any input elements with a placeholder attribute

	<script class="pre">
	$(":input").placeholder();
	</script>


<h2>Number (HTML5 Shim)</h2>

	<form>
		<label>Number field</label>
		<input type="number" data-type="number"/>
		<br />
		<label>Number limited to [min=0] and [max=10]</label>
		<input type="number" data-type="number" min="0" max="10"/>
		<br />
		<label>Number with a [step]</label>
		<input type="number" data-type="number" step="2"/>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.number.css"/>

Include the script

	<script class="pre" src="./src/jquery.number.js"></script>

Bind the Control to the input elements with [type=number] attributes

	<script class="pre">
	$("input[type=number],input[data-type=number]").number();
	</script>




<h2>Datalist (HTML5 Shim)</h2>

	<form>
		<label>[datalist]</label>
		<input list="datalist" type="text" placeholder="Predictive"/>
		<datalist id="datalist">
			<select>
			<option value="Hello" />
			<option value="Yo" />
			<option value="To my Dearest" />
			<option value="Oi you, no!" />
			</select>
		</datalist>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.datalist.css"/>

Include the script

	<script class="pre" src="./src/jquery.datalist.js"></script>

Bind the Control to the datalist

	<script class="pre">
	$("input[list]").datalist();
	</script>



<h2>Textarea -  Expand as you type</h2>
	<form>
		<label>&lt;textarea&gt;</label>
		<textarea placeholder="Expands as you type"></textarea>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.textarea.css"/>

Include the script

	<script class="pre" src="./src/jquery.textarea.js"></script>

Bind the Control to the textarea

	<script class="pre">
	$("textarea").textarea();
	</script>


<h2>WYSIWYG Editor</h2>

	<form>
		<textarea type="html">Write here</textarea>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.editor.css"/>

Include the script

	<script class="pre" src="./src/jquery.editor.js"></script>

Bind the Control to the editor

	<script class="pre">
	$("textarea[type=html]").editor();
	</script>


<h2>Predict - AutoComplete</h2>

	<form>
		<label>Predicting</label> <input type="search" name="countries" placeholder="Country Names"/>
	</form>

Include the stylesheet

	<link class="pre" rel="stylesheet" href="./src/jquery.predict.css"/>

Include the script

	<script class="pre" src="./src/jquery.predict.js"></script>

Attach the data ('countryNames' here, is an Array, but it can be something else)

	<script class="pre">
	$("input[name=countries]").predict({
		data : countryNames
	});
	</script>

</body>
</html>